//配置路由:vue-router插件(核心插件配置路由)
//第一步:引入vue-router插件 函数对象
import VueRouter from 'vue-router';
//第二步:引入Vue---因为需要需用这个插件一次
import Vue from 'vue';
//第三步:使用这个插件
Vue.use(VueRouter);
//引入一级路由组件路由组件
import Home from '@/pages/Home';
import About from '@/pages/About';

//引入二级路由组件
import News from '@/pages/News';
import Message from '@/pages/Message';

//引入三级路由
import Table from '@/pages/Table'
//第四步：配置项目的路由
//默认暴露,一个VueRouter类的一个实例【router：路由器】
export default new VueRouter({
    //配置路由,routes右侧数据，数组里面即为配置路由信息
    routes: [
        {
            path: "/home",//path设置K,路径一般都是小写的
            component: Home,//component设置V
            //这里是书写下一级路由配置地方
            children: [
                //二级路由|三级路由，path一般不书写/，直接书写子路由的名字
                {
                    path: "news", //第一种写法:path前面不加反斜杠，直接书写子路由的名字
                    component: News
                },
                {
                    path: 'message',//第二种写法:path非要写反斜杠,路径写全的！！！
                    component: Message,
                    //子路由：三级路由
                    children: [
                        { 
                            //如果某一个路由要传递params参数，路由的配置需要占位
                            path: 'table/:car',
                            component:Table,
                            //命名路由，给路由起名字！！！
                            name:'table'
                        }
                    ]
                }
            ]
        }
        ,
        {
            path: '/about',
            component: About
        }
        ,
        //配置重定向:默认访问的/,立马让项目重定向到About
        //强哥:React重定向，一般垫底的！！！Vue重定向，你放在哪里都可以
        //一般是放在配置路由底下
        {
            path: '/',
            //redirect右侧V不是引用类型的组件，是K【字符串】
            redirect: '/about'
        },

    ]
});
